.me-icon {
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
    transition: transform 0.3s ease;

    &:hover {
        opacity: 0.9;
    }
}

// 旋转动画
@keyframes me-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(var(--spin-degree, 360deg));
    }
}

// 反向旋转动画
@keyframes me-icon-spin-reverse {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(calc(var(--spin-degree, 360deg) * -1));
    }
}

.me-icon-spin {
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    &:not(.me-icon-spin-reverse) {
        animation-name: spin;
    }

    &.me-icon-spin-reverse {
        animation-name: spin-reverse;
    }

    &.me-icon-spin-slow {
        animation-duration: 3s;
    }

    &.me-icon-spin-normal {
        animation-duration: 1.5s;
    }

    &.me-icon-spin-fast {
        animation-duration: 0.8s;
    }
}
